<template>
	<view :class="['goodsList-main',{'disabledScroll': showMenuTool}]">
		<NavigationBar :showSearch="true" bgColor="#fff" fixed="fixed" />
		<view class="search-menu">
			<view class="search-menu-content" :style="{top: menuTop+'px'}">
				<view class="menu-list">
					<view class="menu-item" @click="clickMenuAction()">综合</view>
					<view class="menu-item">销量</view>
					<view class="menu-item">价格</view>
					<view class="menu-item">筛选</view>
				</view>
				<div class="menu-cover" v-if="showMenuTool"  @click="hideMenuAction"></div>
				<view class="menu-content" v-if="showMenuTool">
					<view class="menu-content-item">综合</view>
					<view class="menu-content-item">最新上架</view>
					<view class="menu-content-item">评价最后</view>
				</view>
			</view>
		</view>
		<view>
			<mescroll-body ref="mescrollRef" :topbar="false" :bottombar="false" @init="mescrollInit" @down="downCallback" @up="upCallback" >
				<view class="goods-list">
					<view v-for="(rItem,rIndex) in dataList" :key="rIndex" class="goods-item">
						<view class="goods-content">
							<view class="prolist-cover">
								<image class="cover" src="//img10.360buyimg.com/n2/s270x270_jfs/t1/122126/39/10907/98304/5f460f06E23dce107/9647eb7596ae0e43.jpg!q70.dpg" mode=""></image>
							</view>
							<view class="prolist-info b-b">
								<view class="pro-info-above">
									<text class="pro-info-title txt-overflow-m">
										<text class="mod-tag">精品超市</text>猫咪活体宠物猫英短蓝白蓝猫活体幼崽 曼基康拿破仑蓝胖子银渐层幼猫短腿猫宠物 白色 公  其他 幼年猫(12月以下){{rIndex}}
									</text>
									<view class="pro-info-label">
										<text class="word">定时</text>
										<text class="word">国产</text>
										<text class="word">智能</text>
									</view>
								</view>
								<view class="pro-info-below">
									<view class="price">¥<text class="int">339</text>.68</view>
									<view class="other">
										<image class="mod-tag-img" src="//img11.360buyimg.com/jdphoto/s48x28_jfs/t1/12264/37/1979/1085/5c185d6dEba7743da/c5ab4d78f8bf4d90.png" mode=""></image>
										2000+条评价 好评率91%
									</view>
									<view class="shop">宠幸京东自营官方旗舰店<text class="iconfont arrow-right-icon">&#xe60a;</text></view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</mescroll-body>
		</view>
	</view>
</template>

<script lang="ts">
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins";
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				menuTop: 44,
				showMenuTool: false,
				dataList: [1,2,3,4,5,6,7,8,9,0]
			};
		},
		onLoad(option:any) {
			const _this:any = this
			let query = _this.$route
			// console.log(option,query)
			let systemInfo = uni.getSystemInfoSync()
			let statusBarHeight = systemInfo.statusBarHeight
			_this.menuTop = statusBarHeight + 44
		},
		methods: {
			upCallback(page:any) {
				const _this: any = this
				
				if(page.num == 1) _this.dataList = []
			
				setTimeout(()=>{
				
					let curPageData = new Array(24).fill(2)
					let curPageLen = curPageData.length
					
					_this.dataList = _this.dataList.concat(curPageData)
					
					console.log('上拉-------',_this.dataList)
					
					_this.mescroll.endByPage(curPageLen, 3); 
					
				},2000)
			},
			clickMenuAction() {
				(this as any).showMenuTool = !(this as any).showMenuTool
			},
			hideMenuAction() {
				(this as any).showMenuTool = false
			}
		}
	}
</script>

<style lang="scss">
	@import './goodsList.scss'
</style>
